import $ from 'jquery';
import PicDialog from "../../../app/components/data/picdialog/PicDialog"
import PicDialogStore from "../dialog/PicDialogStore"
import loadjs from "loadjs";
import { observable } from "mobx";
import { viewer } from '../data/viewer';
const filterPng = '';
const filterOpenPng = '';
const filterNormalPng = '';
const filterNormalOpenPng = '';

const filterImg = document.createElement('img');
filterImg.src = filterPng;
const filterOpenImg = document.createElement('img');
filterOpenImg.src = filterOpenPng;
const filterNormalImg = document.createElement('img');
filterNormalImg.src = filterNormalPng;
const filterNormalOpenImg = document.createElement('img');
filterNormalOpenImg.src = filterNormalOpenPng;
const width = 20;

const picCache = {};

export default (col,c, store) => {
    const { title: header } = c;
    const text = col || '';
    class Type extends GC.Spread.Sheets.CellTypes.Base {
        @observable dialogStore = new PicDialogStore();
        filterDialogVisible = {};
        filterInfo = {};
        fieldType;
        picurls = [];
        imgPool = [];
        time = 0;
        iscompress ="&iscompress=1";
        paint(ctx, value, x, y, w, h, style, context) {
            this.imgPool = [];
            try {
                ctx.clearRect(x, y, w, h);
                const { col, sheet } = context;
                this.fieldType = [];
                if (text && text.trim() != '') {
                    if (text.indexOf("#") <= -1) {
                        let info = text.split("@");
                        let type = info[0];
                        if (type == "jpg") {

                            this.picurls = info[1].split(",");
                            this.picurls.forEach((pic, index) => {
                                if (!pic) {
                                    return;
                                }
                                let orgPic = pic;
                                let compressPic;
                                if(pic.indexOf("~") > -1) {
                                    let pics = pic.split("~");
                                    orgPic = pics[0];
                                    compressPic = pics[1];
                                }
                                this.fieldType.push(type);
                                const src = "/weaver/weaver.file.FileDownload?fileid=" + orgPic;
                                let compressSrc = compressPic ? ("/weaver/weaver.file.FileDownload?fileid=" +compressPic) : "/weaver/weaver.file.FileDownload?fileid=" + orgPic+ this.iscompress;
                                if (picCache[compressSrc]) {
                                    ctx.drawImage(picCache[compressSrc], x + 3 * (index + 1) + (width * index), y + (h - width) / 2, width, width);
                                } else {
                                    const img = document.createElement('img');
                                    img.src = compressSrc;
                                    img.onload = () => {
                                        ctx.drawImage(img, x + 3 * (index + 1) + (width * index), y + (h - width) / 2, width, width);
                                        sheet.repaint();
                                    }
                                    picCache[compressSrc] = img;

                                }
                                this.imgPool.push(src);
                            })

                        } else if (type == "wx") {
                            const wxinfo = info[1].split("|weixin|");
                            const src = wxinfo[0];
                            this.picurls[0] = wxinfo[0];
                            this.fieldType.push(type);
                            if (picCache[src]) {
                                ctx.drawImage(picCache[src], x + 3, y + (h - width) / 2, width, width);
                            } else {
                                const img = document.createElement('img');
                                img.src = src;
                                img.className = 'cubeFormImgPlay'
                                img.imgsrc = src;
                                img.onClick = this.viewer;
                                img.onload = () => {
                                    ctx.drawImage(img, x + 3, y + (h - width) / 2, width, width);
                                    sheet.repaint();
                                }
                                picCache[src] = img;

                            }
                            this.imgPool.push(src);

                            super.paint(ctx, wxinfo[1] + "@微信", x + 6 + width, y, w, h, style, context);
                        } else {
                            this.picurls = info[1].split(",");

                            const src = "/mobilemode/images/icon/" + type + "_wev8.png";
                            // if (picCache[src]) {
                            //     ctx.drawImage(picCache[src], x + 3, y + (h - width) / 2, width, width);
                            // } else {
                            //     const img = document.createElement('img');
                            //     //img.src = "/weaver/weaver.file.FileDownload?fileid=" + 244;
                            //     img.src = "/mobilemode/images/icon/" + this.fieldType + "_wev8.png";
                            //     img.onload = () => {
                            //         ctx.drawImage(img, x + 3, y + (h - width) / 2, width, width);
                            //         sheet.repaint();
                            //     }
                            //     picCache[src] = img;
                            // }

                            this.picurls.forEach((pic, index) => {
                                if (!pic) {
                                    return;
                                }
                                this.fieldType.push(type);
                                // const src = "/mobilemode/images/icon/" + this.fieldType + "_wev8.png";
                                if (picCache[src]) {
                                    ctx.drawImage(picCache[src], x + 3 * (index + 1) + (width * index), y + (h - width) / 2, width, width);
                                } else {
                                    const img = document.createElement('img');
                                    img.src = src;
                                    img.onload = () => {
                                        ctx.drawImage(img, x + 3 * (index + 1) + (width * index), y + (h - width) / 2, width, width);
                                        sheet.repaint();
                                    }
                                    picCache[src] = img;

                                }
                                this.imgPool.push(src);
                            })
                        }
                    } else {
                        let types = text.split("#");

                        this.picurls = [];
                        this.fieldType = [];

                        types.forEach((type, index) => {

                            let info = type.split("@");
                            this.picurl = info[1].split(",");
                            let src;

                            // if (picCache[src]) {
                            //     ctx.drawImage(picCache[src], x + 3, y + (h - width) / 2, width, width);
                            // } else {
                            //     const img = document.createElement('img');
                            //     //img.src = "/weaver/weaver.file.FileDownload?fileid=" + 244;
                            //     img.src = "/mobilemode/images/icon/" + this.fieldType + "_wev8.png";
                            //     img.onload = () => {
                            //         ctx.drawImage(img, x + 3, y + (h - width) / 2, width, width);
                            //         sheet.repaint();
                            //     }
                            //     picCache[src] = img;
                            // }

                            this.picurl.forEach((pic, pindex) => {
                                if (!pic) {
                                    return;
                                }
                                let src;
                                if (info[0] == 'jpg') {

                                    let orgPic = pic;
                                let compressPic;
                                if(pic.indexOf("~") > -1) {
                                    let pics = pic.split("~");
                                    orgPic = pics[0];
                                    compressPic = pics[1];
                                }
                                src = "/weaver/weaver.file.FileDownload?fileid=" + orgPic;
                                let compressSrc = compressPic ? ("/weaver/weaver.file.FileDownload?fileid=" +compressPic) : "/weaver/weaver.file.FileDownload?fileid=" + orgPic+ this.iscompress;
                                this.imgPool.push(src);
                                src = compressSrc;
                                } else {

                                    src = "/mobilemode/images/icon/" + info[0] + "_wev8.png";
                                }
                                this.picurls.push(pic);
                                this.fieldType.push(info[0])
                                // const src = "/mobilemode/images/icon/" + this.fieldType + "_wev8.png";
                                if (picCache[src]) {
                                    ctx.drawImage(picCache[src], x + 3 * (index + 1) + (width * index), y + (h - width) / 2, width, width);
                                } else {
                                    const img = document.createElement('img');
                                    img.src = src;
                                    img.onload = () => {
                                        ctx.drawImage(img, x + 3 * (index + 1) + (width * index), y + (h - width) / 2, width, width);
                                        sheet.repaint();
                                    }
                                    picCache[src] = img;

                                }
                            })

                        })
                    }

                }
            } catch (e) {
                console.log(e);
            }
        }

        viewer = (indexNum) => {
            viewer(this.imgPool, indexNum);
            return;

        };

        getCurrentWindow = () => {
            // if (this.state.hasSetWindow) {
            //   return window["setUploadWindow" + this.state.containerId];
            // }
            return WindowFunc.getParent() !== window &&
                $(this.refs.wrap).closest(".ant-modal").length > 0
                ? WindowFunc.getTop()
                : window;
            // return WindowFunc.getParent() !== window
            //   ? WindowFunc.getTop()
            //   : window;
        };

        getAutoFitWidth(value, a, cellStyle, zoomFactor, context) {

            let count = 0;
            if (value && value.trim() != '') {
                if (text.indexOf("#") <= -1) {
                    let info = text.split("@");
                    let type = info[0];
                    if (type == "wx") {
                        count = 1;
                    } else{

                        count = info[1].split(",").length;

                    }
                } else {
                    let types = text.split("#");

                    this.picurls = [];
                    this.fieldType = [];

                    types.forEach((type, index) => {

                        let info = type.split("@");
                        this.picurl = info[1].split(",");
                        let src;

                        this.picurl.forEach((pic, pindex) => {
                            if (!pic) {
                                return;
                            }
                            count = count + 1;
                        })

                    })
                }

            }

            return Math.max(super.getAutoFitWidth(header, header, cellStyle, zoomFactor, context) + 66, count * 24);
            // const width = ((picurls || []).length + 2) * (width + 5);
            // console.log("宽度为" + width)
            // return width;
        }


        getAutoFitHeight(value, a, cellStyle, zoomFactor, context) {
            return 25;
            // const width = ((picurls || []).length + 2) * (width + 5);
            // console.log("宽度为" + width)
            // return width;
        }
        processMouseMove(hitInfo) {
            const { filterButton } = hitInfo;
            const { sheet } = hitInfo;
            var div = sheet.getParent().getHost();
            var canvasId = div.id + "vp_vp";
            var canvas = $("#" + canvasId)[0];
            if (hitInfo) {

                canvas.style.cursor = 'pointer';
                //canvas.title = this.fieldType == 'jpg' ? '点击放大' : '点击下载';
                return true;
            } else {
                //canvas.title = col.text;
                canvas.style.cursor = 'pointer';
                return false;
            }

        }

        processMouseUp(hitInfo) {
            store.filterVisible = false;
            const { x, y, cellRect, sheet } = hitInfo;
            const w = cellRect.width;
            // 计算点击位置 判断点击的是第几张图
            const clickDiff = x - cellRect.x;
            if (clickDiff <= 0) {
                return;
            } else {
                let count = Math.ceil(clickDiff / (width + 3));
                if (this.picurls.length < count) {
                    store.showData();
                    return;
                }
                const picSrc = this.picurls[count - 1];
                if (picSrc) {
                    if (this.fieldType[count - 1] == 'jpg') {
                        this.viewer(count - 1);
                        //this.showPic(hitInfo, cellRect, "/weaver/weaver.file.FileDownload?fileid=" + picSrc);
                    } else if (this.fieldType[count - 1] == 'wx') {
                        //this.showPic(hitInfo, cellRect, picSrc);
                        this.viewer(count - 1);
                    } else {
                        //WeaTools.downloadFile('/api/ec/dev/util/exportBase64', "POST", {src: '/weaver/weaver.file.FileDownload?fileid=' + picSrc});
                        let isdownload = '';
                        // 因为乱码问题，txt改为下载
                        if (this.fieldType[count - 1] == 'txt') {
                            isdownload = '&download=1';
                        }
                        window.open('/weaver/weaver.file.FileDownload?fileid=' + picSrc + isdownload, '_blank');
                    }
                }

            }

            // if (hitInfo.filterButton) {
            //     console.log(hitInfo);
            // }
        }

        processMouseLeave(hitInfo) {
            const { sheet } = hitInfo;
            var div = sheet.getParent().getHost();
            var canvasId = div.id + "vp_vp";
            var canvas = $("#" + canvasId)[0];
            //canvas.title = col.title;
            canvas.style.cursor = 'pointer';
            return true;
        }
        getHitInfo(x, y, cellStyle, cellRect, context) {
            const info = {
                x,
                y,
                cellStyle,
                cellRect,
                ...context,
                filterButton: x > cellRect.x + cellRect.width - 18
            }
            return info;
        }

        showPic(context, cellRect, picsrc) {
            const { sheet, row, col } = context;
            if (!this.editor) {
                this.editor = document.createElement('div');
                const host = sheet.getParent().getHost();
                host.appendChild(this.editor);
                this.editor.style.visibility = 'hidden';
                $(this.editor).css({
                    position: 'absolute',
                    left: cellRect.x,
                    top: cellRect.y,
                    width: cellRect.width,
                    height: cellRect.height,
                });
            }
            this.state = {
                visible: true,
            };
            this.dialogStore.picSrc = picsrc;
            this.dialogStore.visible = true;
            this.dialogStore.left = cellRect.x;
            this.dialogStore.top = cellRect.y;
            ReactDOM.render(<PicDialog ecId={`${this && this.props && this.props.ecId || ''}_PicDialog@13pzv5`} store={this.dialogStore} />
                , this.editor);
        }
    }
    return new Type();
}